<template>
  <div class="box">
    <div class="sidebar">
      <el-menu class="sidebar-el-menu" :default-active="onRoutes" :collapse="collapse" background-color="#324157"
        text-color="#bfcbd9" active-text-color="#20a0ff" unique-opened router @select="handleselect">
        <template v-for="item in items">
          <template v-if="item.subs && showMenu">
            <el-submenu :index="item.index" :key="item.index" v-if="item.is_show">
              <template #title>
                <i :class="item.icon"></i>
                <span>{{ item.title }}</span>
              </template>
              <template v-for="subItem in item.subs">
                <el-submenu v-if="subItem.subs && subItem.is_show" :index="subItem.index" :key="subItem.index"
                  @contextmenu.prevent="handleContextmenu($event, subItem)">
                  <template #title>{{ subItem.title }}</template>
                  <el-menu-item v-for="(threeItem, i) in subItem.subs" :key="i" :index="threeItem.index"
                    @contextmenu.prevent="handleContextmenu($event, subItem)">
                    {{ threeItem.title }}</el-menu-item>
                </el-submenu>
                <el-menu-item v-else-if="subItem.is_show" :index="subItem.index" :key="subItem.index"
                  @contextmenu.prevent="handleContextmenu($event, subItem)">{{ subItem.title }}
                </el-menu-item>
              </template>
            </el-submenu>
          </template>
          <template v-else>
            <el-menu-item :index="item.index" :key="item.index" v-if="item.is_show && showMenu"
              @contextmenu.prevent="handleContextmenu($event, item)">
              <i :class="item.icon"></i>
              <template #title>{{ item.title }}</template>
            </el-menu-item>
          </template>
        </template>
      </el-menu>
      <div class="contextmenu" @mouseleave="mouseLeave" v-show="visible"
        :style="{ left: offsetLeft + 'px', top: offsetTop + 'px' }">
        <ul>
          <li @click="handleLabelOpen">在新标签中打开标签</li>
          <li @click="handleNewLabelOpen">在新窗口中打开链接</li>
          <li @click="handlehideLabelOpen">在隐身窗口中打开链接</li>
        </ul>
        <ul>
          <!-- <li @click="handledownUrl">链接本地保存</li> -->
          <li @click="handleCopy" class="tag-read" :data-clipboard-text="windowurl">
            复制链接地址
          </li>
        </ul>
        <ul>
          <!-- <li @click="handlecheck">检查</li> -->
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import { computed, watch } from "vue";
import { useStore } from "vuex";
import { useRoute } from "vue-router";
import { reactive, ref, getCurrentInstance } from "vue";
import { getdownload } from "../assets/js/fileExport";
import api from "../api/api";
import Clipboard from "clipboard";
export default {
  setup(prop, context) {
    let { proxy } = getCurrentInstance();
    const route = useRoute();

    const onRoutes = computed(() => {
      return route.path;
    });

    const store = useStore();
    const collapse = computed(() => store.state.collapse);
    const visible = computed(() => store.state.visible);
    const showMenu = ref(true);
    const items = [
      {
        icon: "el-icon-lx-home",
        index: "12",
        title: "系统首页",
        is_show: false,
        subs: [
          // {
          //   index: "/home2",
          //   title: "统一平台",
          //   authorityCode: "INDEXC_VIEW",
          //   is_show: false,
          // },{
          //   index: "/home1",
          //   title: "智慧教室",
          //   authorityCode: "INDEXC_VIEW",
          //   is_show: false,
          // },
          {
            index: "/dashboard",
            title: "楼栋分布首页",
            authorityCode: "INDEX_VIEW",
            is_show: false,
          },
          {
            index: "/homepage",
            title: "GIS地图首页",
            authorityCode: "INDEXB_VIEW",
            is_show: false,
          }, {
            index: "/homepageIrontower",
            title: "铁搭首页",
            authorityCode: "INDEXJ_VIEW",
            is_show: false,
          },
          {
            index: "/cityCollegeIndex",
            title: "城市学院",
            authorityCode: "INDEXC_VIEW",
            is_show: false,
          },
          {
            index: "/hingCollegeIndex",
            title: "兴才学院",
            authorityCode: "INDEXD_VIEW",
            is_show: false,
          },
          {
            index: "/index",
            title: "宏发首页",
            authorityCode: "INDEXE_VIEW",
            is_show: false,
          },
          {
            index: "/fudanHospital",
            title: "复旦中山医院",
            authorityCode: "INDEXF_VIEW",
            is_show: false,
          },
          {
            index: "/engineeCollege",
            title: "工学院首页",
            authorityCode: "INDEXG_VIEW",
            is_show: false,
          },
          {
            index: "/controlPanelIndex",
            title: "统一控制台",
            authorityCode: "INDEXH_VIEW",
            is_show: false,
          }, {
            index: "/figureIndex",
            title: "数字厦工",
            authorityCode: "INDEXI_VIEW",
            is_show: false,
          },
          // {
          //   index: "/electricalFireIndex",
          //   title: "电气火灾",
          //   authorityCode: "INDEXH_VIEW",
          //   is_show: false,
          // },
        ],
      },
      {
        icon: "el-icon-lx-goodsfill",
        index: "16",
        title: "定制功能",
        is_show: false,
        subs: [
          {
            index: "/runStatus",
            title: "设备运行状态",
            authorityCode: "AIRCONDITIONER_LIST_VIEW",
            is_show: false,
          },
          {
            index: "/bar3d",
            title: "用电分析",
            authorityCode: "ELECTRICITYCHART_VIEW",
            is_show: false,
          }
          // , {
          //   index: "/infoBulletin",
          //   title: "信息公告",
          //   authorityCode: "ELECTRICITYCHART_VIEW",
          //   is_show: false,
          // }, {
          //   index: "/hitachiDedicated",
          //   title: "立日专用配置",
          //   authorityCode: "ELECTRICITYCHART_VIEW",
          //   is_show: false,
          // },
        ],
      },
      {
        icon: "el-icon-lx-goodsfill",
        index: "21",
        title: "报警管理",
        is_show: false,
        subs: [
          {
            icon: "el-icon-lx-newsfill",
            index: "/alarmMgt",
            title: "报警管理",
            authorityCode: "DEVICEALARM_VIEW",
            is_show: false,
          },
          {
            index: "/alarmStrategy",
            title: "报警设置",
            authorityCode: "DEVICEALARM_SET_VIEW",
            is_show: false,
          },
        ],
      }, {
        icon: "el-icon-lx-global",
        index: "22",
        title: "工单管理",
        is_show: false,
        subs: [
          {
            icon: "el-icon-lx-newsfill",
            index: "/workorderMgt",
            title: "工单管理",
            authorityCode: "WORKSHEET_VIEW",
            is_show: false,
          },
          {
            index: "/workOrderAdvice",
            title: "工单通知",
            authorityCode: "DEVICEALARM_NOTIFYSET_VIEW",
            is_show: false,
          },
        ],
      },
      {
        icon: "el-icon-lx-calendar",
        index: "1",
        title: "设备管理",
        is_show: false,
        subs: [
          {
            index: "/unit_equipment",
            title: "单位设备管理",
            authorityCode: "DTTDEVICE_VIEW",
            is_show: false,
          },
          {
            index: "/roomMgt",
            title: "房间设备管理",
            authorityCode: "DEVICE_REGION_VIEW",
            is_show: false,
          },
          {
            index: "/classmgt",
            title: "教室管理",
            authorityCode: "CLASSROOM_VIEW",
            is_show: false,
          },
          // {
          //   index: "/breaker",
          //   title: "智能断路器",
          //   is_show: true,
          // },
          {
            index: "/electric_eqt",
            title: "智能断路器管理",
            authorityCode: "DEVICE_VIEW",
            is_show: false,
          },
          {
            index: "/listDevices",
            title: "设备列表",
            authorityCode: "SWITCHLIST_VIEW",
            is_show: false,
          },
          {
            index: "/wisdom_host",
            title: "智慧主机管理",
            authorityCode: "BINDRTU_VIEW",
            is_show: false,
          },
          {
            index: "/airConditioner",
            title: "空调管理",
            authorityCode: "AIR_MANAGE_VIEW",
            is_show: false,
          },
          {
            index: "/particle_countMgt",
            title: "粒子计数器管理",
            authorityCode: "TERMINALMANAGE_VIEW",
            is_show: false,
          }, {
            index: "/humitureMgt",
            title: "温湿度管理",
            authorityCode: "HUMITURE_MNG_VIEW",
            is_show: false,
          },
          {
            index: "/smokeMgmt",
            title: "烟感管理",
            authorityCode: "SMOKE_LIST_VIEW",
            is_show: false,
          },
          {
            index: "/repair_list",
            title: "报修列表",
            authorityCode: "REPAIR_VIEW",
            is_show: false,
          },
          {
            index: "/temporaryElectricity",
            title: "房间临时用电",
            authorityCode: "TEMPORARY_VIEW",
            is_show: false,
          },
          {
            index: "/electricalFire",
            title: "电气火灾",
            authorityCode: "ACREL_MANAGE_VIEW",
            is_show: false,
          },
        ],
      },
      {
        icon: "el-icon-lx-global",
        index: "13",
        title: "设备库",
        is_show: false,
        subs: [
          {
            index: "/host_library",
            title: "智慧主机库",
            authorityCode: "RTU_VIEW",
            is_show: false,
          },

          {
            index: "/AirConditioner_library",
            title: "空调库",
            authorityCode: "AIR_ALL_VIEW",
            is_show: false,
          }, {
            index: "/centralAir",
            title: "中央空调",
            authorityCode: "AIR_CENTER_VIEW",
            is_show: false,
          },
          {
            index: "/particle_counter",
            title: "粒子计数器",
            authorityCode: "TERMINALUNIT_VIEW",
            is_show: false,
          },
          {
            index: "/humiture",
            title: "温湿度",
            authorityCode: "HUMITURE_VIEW",
            is_show: false,
          },
          {
            index: "/tobacco_stems",
            title: "烟感NSA102",
            authorityCode: "SMOKEALARM_VIEW",
            is_show: false,
          },
          {
            index: "/online_device",
            title: "在线监测装置",
            authorityCode: "MONITOR_VIEW",
            is_show: false,
          },
          {
            index: "/fault_detector",
            title: "故障电弧探测器",
            authorityCode: "ARCFAULT_VIEW",
            is_show: false,
          },
          {
            index: "/csa_device",
            title: "灭弧装置",
            authorityCode: "ARCEXTINGUISHING_VIEW",
            is_show: false,
          },
          {
            index: "/electrical_Fire",
            title: "电气火灾",
            authorityCode: "ACREL_VIEW",
            is_show: false,
          },
        ],
      },
      {
        icon: "el-icon-lx-service",
        index: "2",
        title: "用户管理",
        is_show: false,
        subs: [
          {
            index: "/userInfoMgt",
            title: "用户信息管理",
            authorityCode: "ACCOUNTAUTH_VIEW",
            is_show: false,
          },
          {
            index: "/userMgt",
            title: "用户管理",
            authorityCode: "ACCOUNT_VIEW",
            is_show: false,
          },
          {
            index: "/userRoomMgt",
            title: "房间管理",
            authorityCode: "ACCOUNTROOM_VIEW",
            is_show: false,
          },
        ],
      },
      {
        icon: "el-icon-lx-newsfill",
        index: "3",
        title: "报表查询",
        is_show: false,
        subs: [
          {
            index: "/payment_report",
            title: "充值缴费报表",
            is_show: false,
            authorityCode: "RECHARGE_VIEW",
          },
          {
            index: "/electrovalence",
            title: "电价修改报表",
            is_show: false,
            authorityCode: "PRICECHANGE_VIEW",
          },
          {
            index: "/policeReport",
            title: "用电设备报警报表",
            is_show: false,
            authorityCode: "ALARM_SUM_VIEW",
          },
          {
            index: "/change_Index",
            title: "电量变更报表",
            is_show: false,
            authorityCode: "ELECTRICITY_REPORT_VIEW",
          },
        ],
      },
      {
        icon: "el-icon-lx-goodsfill",
        index: "4",
        title: "充值管理",
        is_show: false,
        subs: [
          {
            index: "/packageMgt",
            title: "充值套餐管理",
            authorityCode: "RECHARGESET_VIEW",
            is_show: false,
          },
          {
            index: "/rechargeRecord",
            title: "充值记录管理",
            is_show: false,
            authorityCode: "RECHARGELIST_VIEW",
          },
          {
            index: "/offline_rechargeMgt",
            title: "线下缴费管理",
            authorityCode: "OFFLINE_PAY_VIEW",
            is_show: false,
          },
        ],
      },
      // {
      //   icon: "el-icon-lx-newsfill",
      //   index: "13",
      //   title: "单位管理",
      //   is_show: true,
      //   subs: [
      //     {
      //       index: "/unitmgt",
      //       title: "单位管理",
      //       is_show: true,
      //       // authorityCode: "",
      //     },
      //     {
      //       index: "/unit_sortmgt",
      //       // index: "/sortmgt",
      //       title: "分类管理",
      //       is_show: true,
      //       // authorityCode: "",
      //     },
      //   ],
      // },
      {
        icon: "el-icon-lx-service",
        index: "8",
        title: "单位管理",
        is_show: false,
        subs: [
          {
            index: "/sortmgt",
            title: "场所管理",
            authorityCode: "AREA_VIEW",
            is_show: false,
          },
          {
            index: "/build_ridgepole",
            title: "单位管理",
            authorityCode: "BUILDING_VIEW",
            is_show: false,
            //  subs: [
            //   {
            //     index: "/build_ridgepole",
            //     title: "楼栋管理-栋"
            //   }
            // ],
          },
          {
            index: "/room_type",
            title: "联网房间类型",
            authorityCode: "REGIONTYPE_VIEW",
            is_show: false,
            //  subs: [
            //   {
            //     index: "/room_type",
            //     title: "房间类型"
            //   }
            // ],
          },
          {
            index: "/controlRules",
            title: "时控规则管理",
            authorityCode: "TIMERULE_ALL_VIEW",
            is_show: false,
          },
          {
            index: "/alarm_configuration",
            title: "配置报警参数",
            authorityCode: "DEVCONFIG_VIEW",
            is_show: false,
          },
          {
            index: "/schedulemgt",
            title: "课表时间管理",
            authorityCode: "COURSESET_VIEW",
            is_show: false,
          },
        ],
      },
      {
        icon: "el-icon-lx-newsfill",
        index: "/statisticAnalysis",
        title: "统计分析",
        authorityCode: "DATASUM_VIEW",
        is_show: false,
      },
      {
        icon: "el-icon-lx-cascades",
        index: "/feedback",
        title: "意见反馈",
        authorityCode: "FEEDBACK_VIEW",
        is_show: false,
      },
      {
        icon: "el-icon-lx-copy",
        index: "/issue_mgt",
        title: "问题管理",
        authorityCode: "QUESTION_VIEW",
        is_show: false,
      },
      {
        icon: "el-icon-lx-cascades",
        index: "19",
        title: "项目管理",
        is_show: false,
        subs: [
          {
            index: "/projectmgt",
            title: "项目管理",
            authorityCode: "PROJECT_MANAGE_VIEW",
            is_show: false,
          },
          {
            index: "/geologicalExploration",
            title: "地勘查询",
            authorityCode: "FIELDCHECK_VIEW",
            is_show: false,
          }, {
            index: "/prospectingInquiry",
            title: "维保记录",
            authorityCode: "RTUCHECK_VIEW",
            is_show: false,
          }, {
            index: "/teamMgt",
            title: "团队管理",
            authorityCode: "PROJECT_GROUP_VIEW",
            is_show: false,
          },
        ],
      },
      {
        icon: "el-icon-lx-copy",
        index: "11",
        title: "系统管理",
        is_show: false,
        subs: [
          //   {
          //   index: "/department_mgt",
          //   title: "部门管理",
          // },
          {
            index: "/accout_mgt",
            title: "账号管理",
            authorityCode: "SYSUSER_VIEW",
            is_show: false,
          },
          {
            index: "/child_accout",
            title: "子账号管理",
            authorityCode: "SUBMANAGER_VIEW",
            is_show: false,
          },
          {
            index: "/role_mgt",
            title: "角色管理",
            authorityCode: "SYSROLE_VIEW",
            is_show: false,
          },
          {
            index: "/menu_mgt",
            title: "菜单管理",
            authorityCode: "SYSMENU_VIEW",
            is_show: false,
          },
          {
            index: "/dictionary_mgt",
            title: "字典管理",
            authorityCode: "DICTIONARY_VIEW",
            is_show: false,
          },
          {
            index: "/logMgt",
            title: "日志管理",
            authorityCode: "SYS_OPERATELOG_VIEW",
            is_show: false,
          },
          {
            index: "/firmware",
            title: "固件管理",
            authorityCode: "SOFT_VIEW",
            is_show: false,
          },
        ],
      },
      //   {
      //     icon: "el-icon-lx-copy",
      //     index: "/tabs",
      //     title: "tab选项卡",
      //   },
      //   {
      //     icon: "el-icon-lx-calendar",
      //     index: "5",
      //     title: "表单相关",
      //     subs: [
      //       {
      //         index: "/form",
      //         title: "基本表单",
      //       },
      //       {
      //         index: "/upload",
      //         title: "文件上传",
      //       },
      //       {
      //         index: "6",
      //         title: "三级菜单",
      //         subs: [
      //           {
      //             index: "/editor",
      //             title: "富文本编辑器",
      //           },
      //         ],
      //       },
      //     ],
      //   },
      {
        icon: "el-icon-lx-goodsfill",
        index: "14",
        title: "配置管理",
        is_show: false,
        subs: [
          {
            index: "/collegeClassroom",
            title: "工学院教室",
            authorityCode: "ROOM_GXY_VIEW",
            is_show: false,
          },
        ],
      },
      {
        icon: "el-icon-lx-copy",
        index: "/messageMgt",
        title: "消息管理",
        authorityCode: "MSGMANAGER_VIEW",
        is_show: false,
      },

      {
        icon: "el-icon-pie-chart",
        index: "/refund",
        title: "退款管理",
        authorityCode: "REFUND_VIEW",
        is_show: false,
      },
      // {
      //   icon: "el-icon-lx-emoji",
      //   index: "/demo1",
      //   title: "自定义图标",
      //   is_show: true,
      // },
      // {
      //   icon: "el-icon-pie-chart",
      //   index: "/demo",
      //   title: "schart图表",
      //   is_show: true,
      // },
      // {
      //   icon: "el-icon-pie-chart",
      //   index: "/charts",
      //   title: "schart图表",
      // },
      // {
      //   icon: "el-icon-lx-global",
      //   index: "/i18n",
      //   title: "国际化功能",
      // },
      // {
      //   icon: "el-icon-lx-warn",
      //   index: "7",
      //   title: "错误处理",
      //   subs: [
      //     {
      //       index: "/permission",
      //       title: "权限测试",
      //     },
      //     {
      //       index: "/404",
      //       title: "404页面",
      //     },
      //   ],
      // },
      // {
      //   icon: "el-icon-lx-redpacket_fill",
      //   index: "/donate",
      //   title: "支持作者",
      // },
    ];
    const userinfo = ref([]);
    api
      .postFormAPI("auth/user/info", {})
      .then((res) => {
        if (res.data.code == 1) {
          userinfo.value = res.data.data;
          showMenu.value = false;
          if (userinfo.value) {
            if (userinfo.value.permissionList.length > 0) {
              for (var i = 0; i < userinfo.value.permissionList.length; i++) {
                for (var j = 0; j < items.length; j++) {
                  if (
                    userinfo.value.permissionList[i] == items[j].authorityCode
                  ) {
                    items[j].is_show = true;
                  }
                  if (items[j].subs && items[j].subs.length > 0) {
                    for (var z = 0; z < items[j].subs.length; z++) {
                      if (
                        userinfo.value.permissionList[i] ==
                        items[j].subs[z].authorityCode
                      ) {
                        items[j].is_show = true;
                        items[j].subs[z].is_show = true;
                      }
                    }
                  }
                }
              }
            }

            setTimeout(function () {
              showMenu.value = true;
            }, 10);
          }
        //   collapse = computed(() => (store.state.collapse = true));
        //   store.commit("handleCollapse", !collapse.value);
        } else {
          ElMessage.error(res.data.message);
        }
      })
      .catch((err) => { });
    // const visible = ref(false);
    const offsetLeft = ref(false);
    const offsetTop = ref(false);
    const routerUrl = ref("");
    const windowurl = ref("");
    const handleContextmenu = (row, subItem) => {
      store.commit("handleCoseVisible", true);
      offsetTop.value = row.pageY + 20;
      offsetLeft.value = row.pageX;
      routerUrl.value = subItem.index;
      windowurl.value = window.location.origin + routerUrl.value;
    };
    const handleLabelOpen = () => {
      let url = window.location.origin + routerUrl.value;
      console.log(url)
      window.open(url, "_blank");
      store.commit("handleCoseVisible", false);
    };
    const handleNewLabelOpen = () => {
      let url = window.location.origin + routerUrl.value;
      window.open(
        url,
        "_blank",
        "location=yes",
        "toolbar=yes",
        "titlebar=yes",
        "height=yes"
      );
      store.commit("handleCoseVisible", false);
    };
    const handlehideLabelOpen = () => {
      let url = window.location.origin + "/#" + routerUrl.value;
      console.log(url)
      window.open(
        url,
        "alwaysLowered=yes",
        "location=yes",
        "toolbar=yes",
        "menubar=yes"
      );
      store.commit("handleCoseVisible", false);
    };
    const handleCopy = () => {
      var clipboard = new Clipboard(".tag-read");
      clipboard.on("success", (e) => {
        console.log("复制成功");
        store.commit("handleCoseVisible", false);
        clipboard.destroy(); // 释放内存
      });
    };
    const handledownUrl = () => {
      let url = window.location.origin + "/#" + routerUrl.value;
      getdownload(url, "致联科技.html");
    };
    const handleselect = (event) => {
      context.emit("handleselect", event);
    };
    const handlecheck = () => { };
    const mouseLeave = () => {
      store.commit("handleCoseVisible", false);
    };
    return {
      showMenu,
      items,
      onRoutes,
      collapse,
      visible,
      offsetLeft,
      offsetTop,
      userinfo,
      windowurl,
      handleContextmenu,
      handleLabelOpen,
      handleNewLabelOpen,
      handlehideLabelOpen,
      handledownUrl,
      handleCopy,
      handleselect,
      handlecheck,
      mouseLeave,
    };
  },
};
</script>

<style scoped>
.box {
  height: 100%;
}

.sidebar {
  display: block;
  position: absolute;
  left: 0;
  top: 70px;
  bottom: 0;
  overflow-y: scroll;
  background: rgb(50, 65, 87);
}

.sidebar::-webkit-scrollbar {
  width: 0;
}

.sidebar-el-menu:not(.el-menu--collapse) {
  width: 11.5rem;
}

.sidebar>ul {
  height: 100%;
}

.contextmenu {
  width: 200px;
  height: 140px;
  background: #fff;
  position: fixed;
  z-index: 99999999;
  top: 254px;
  left: 100px;
  box-shadow: 3px 3px 2px #bdbdbd;
}

.contextmenu ul:nth-child(1) {
  border-bottom: 1px solid #c4c4c4b9;
  /* padding-bottom:10px; */
}

.contextmenu ul li {
  cursor: pointer;
  padding: 8px 20px;
  color: #333;
  font-size: 14px;
}

.contextmenu ul li:hover {
  background-color: rgba(175, 175, 175, 0.363);
}
</style>
